#vue todo basic | Explore Tumblr posts and blogs

tak4hir0 · 5 years ago

Link

Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。本記事では Composition API 時代の便利ライブラリ VueUse を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。 Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。 VueUse とは？ VueUse は Anthony Fu さん1が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。例えば、ブラウザ上のマウスポインタの座標をリアクティブに取得する useMouse(), ブラウザ API の localStorage を使って状態を保持できる useLocalStorage(), 負荷対策のために連続する関数呼び出しを防ぐ useDebounceFn() 2などといった関数が提供されています。公式サイト: https://vueuse.js.org/ GitHub: antfu/vueuse npm: @vueuse/core 検証環境の構築 GitHub リポジトリの Description に記載通り、Vue 2系・3系のどちらでも利用可能です: 🧰 Collection of Composition API utils for Vue 2 and 3 https://vueuse.js.org/ 今回は Vue CLI で立ち上げた Vue 2.6 系のプロジェクトに @vue/composition-api をプラグインとして追加した環境で検証します。動作確認した環境 macOS Catalina Node.js 12.18.1 npm 6.14.5 Vue CLI v4.4.4 Chrome 83 Vue CLI のインストール Vue CLI をグローバルインストールしたくない方は、以下の手順の vue コマンド部分を npx @vue/cli に読み替えていただいても大丈夫です。プロジェクトの作成 vue-2-vueuse-trial というプロジェクト名で環境を構築していきます: vue create vue-2-vueuse-trial 設定は以下のようにしました: Vue CLI v4.4.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Linter ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No ? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No プラグインと VueUse の導入プロジェクトディレクトリが出来上がったら、@vue/composition-api と VueUse を npm install します: cd vue-2-vueuse-trial npm i @vueuse/core@vue2 @vue/composition-api src/main.ts に Vue.use(VueCompositionApi) を追加します3: src/main.ts import Vue from 'vue' +import VueCompositionApi from '@vue/composition-api' import App from './App.vue' +Vue.use(VueCompositionApi) Vue.config.productionTip = false npm run serve で開発ビルドを開始してください。 VueUse の関数を使ってみる useMouse() リアクティブにマウスポインタの座標が取得できる useMouse() を使ってみます: src/App.vue <template {{ x }}, {{ y }} </template <script lang="ts" import { defineComponent } from '@vue/composition-api' import { useMouse } from '@vueuse/core' export default defineComponent({ setup() { // tracks mouse position const { x, y } = useMouse() return { x, y } } }) </script これだけでマウスポインタの座標がリアクティブに反映されていることがわかるかと思います。 useMouse() の実装を確認すると useEventListener() という関数を使っていて、 useEventListener() はコンポーネントのマウント時(Composition API の onMounted() を利用)にイベントリスナーを追加していることがわかります: https://github.com/antfu/vueuse/blob/master/packages/core/useMouse/index.ts https://github.com/antfu/vueuse/blob/master/packages/core/useEventListener/index.ts VueUse ではこのような関数がより抽象的な関数を参照しているパターンの実装が所々に見られます。 Composition API を用いた良い実装の例として知っておくと良いかと思います。 useLocalStorage() ブラウザ API の localStorage を使って状態を保持できる useLocalStorage() を使ってみます。まずは useLocalStorage() を使わず、 VueUse がなくても利用できる reactive() 4 を使ってみましょう: src/App.vue <template name: <input v-model="state.name" color: <input v-model="state.color" {{ state }} </template <script lang="ts" import { defineComponent, reactive } from '@vue/composition-api' export default defineComponent({ setup() { const state = reactive({ name: 'Apple', color: 'red', }) return { state } } }) </script name, color を変更すると、下に表示されている JSON 形式の state の表示も更新される画面が表示されます: 上記の実装では name を Banana, color を yellow のように変更してページをリロードすると、元の状態(name が Apple, color が red)に戻ります。以下のようにブロックを変更し、reactive() の代わりに useLocalStorage() を利用するように変更してみます: import { defineComponent } from '@vue/composition-api' import { useLocalStorage } from '@vueuse/core' export default defineComponent({ setup() { // persist state in localStorage const state = useLocalStorage( 'my-storage', { name: 'Apple', color: 'red', }, ) return { state } } }) state が localStorage に保存されるようになったので、ページをリロードしても状態が保持されるようになりました。サンプルアプリとしてよくあ�� ToDo リストの状態管理に useLocalStorage() を使うようにすると、手軽にデータを保存できる ToDo リストにできて楽しいかもしれません。公式サイトが Storybook でできている件公式サイトが Storybook でできていて、各関数を即座に試せるリファレンスとなっています。各関数のページ下部には関数の "Source" へのリンクがあり、ソースを見てどのような実装になっているか追っていくと Composition API を用いた良い実装の勉強となるかと思います。所感 VueUse は多くの便利関数を提供しているので、今後お世話になる可能性が高いライブラリだと思いました。まだ試せていない関数が多くあるので、使ってみたりコードを読んだりしてみようかと思います。

#Qiita

0 notes

netmetic · 5 years ago

Text

Linking Vuex State Machines Across Your Vue Client Applications with Solace PubSub+

Vue.js is a JavaScript framework developed by Evan You that’s making significant inroads as the framework of choice for modern single-page applications. One reason it has become so popular is that it comes with components any single-page-application is expected to have, such as a router, a developer UI to manage your application, and a state management library called Vuex. To learn more about Vue.js, visit the Getting Started with Vue site.

What is Vuex?

According to the official web site for Vuex, it is a state management pattern and library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

Key to the architecture of Vuex are the concepts of state, views, and actions:

State serves as the source of truth that drives our applications

The view is a declarative mapping of the state

Actions are the ways the state could change in reaction to user inputs from the view

A simplistic illustration of a Vuex workflow

The Vuex store is instantiated within your application as a singleton, which means there is a single instance of the store that lives within your Vue application, and your various components look to it as the source of truth.

What makes Vuex even more powerful and easier to use is its deep integration into the Vue.Js DevTool Chrome Extension, which allows you to look at the sequence of state mutations and even replay state changes.

Example of the Vuex view in the Vuex DevTool browser extension

Why are state machines important for your JavaScript applications?

State machines are becoming an increasingly important part of any modern application framework. With the pervasiveness of single-page application frameworks, it is also becoming a de facto part of front-end applications.

Depending on the JavaScript framework you are using, there are a variety of choices such as Vuex for Vue and Redux for React. There is also a JavaScript framework-agnostic library called XState.

If you are building an application, it will almost have ‘state’ associated with it. For front-end applications, your application state may include whether the user is logged in or whether the user is an admin. Compared to sprinkling and checking the logic for these transitions throughout your application, handling these states from a single location in your codebase is easier and less prone to errors. This is where a state machine library comes into play – typically exposed as a ‘singleton’ and accessed from within your application, it provides a single source of truth for the state of your applications.

Implementing Vuex for a turn-based game

Now let’s implement a basic Vuex container (state, actions, and mutations) for a turn-based game. Here are the key components we will need to implement:

State

player – The ID of the player (Player1or Player2 )

isTurn – Boolean value that represents whether it is the player’s turn

Actions

makeMove – Sends the move to the other player and swaps the turn off for the current player

receiveMove – Receives a move from the other player and activates the current player’s turn

Here is the bare-bones implementation:

export default new Vuex.Store({ state: { player: '', isTurn: false }, mutations: { LOGIN(state, player) { state.player = player if (state.player === 'Player1') state.isTurn = true }, TOGGLE_TURN(state) { state.isTurn = !state.isTurn } }, actions: { login({ commit }, player) { console.log('Attempting to login with ' + player) commit('LOGIN', player) }, makeMove({ commit, getters }, move) { if (getters.isTurn()) { //TODO: Send a move to the other player } }, receiveMove({ commit, getters }, otherPlayerMove) { if (!getters.isTurn()) { console.log( `Received move from other player ${JSON.stringify(otherPlayerMove)}` ) commit('TOGGLE_TURN') } } }, getters: { isTurn: state => () => { return state.isTurn }, getPlayer: state => () => { return state.player } } })

Implementation gaps

Now you’ve implemented a bare-bones skeleton of your Vuex store, but you may have noticed there are a few gaps.

You aren’t sending the ‘move’ object anywhere.

How do you get notified if another player made a move?

Suppose this was a two-player game, the sequence expected would be as follows:

Player1 and Player2 log in.

Player1 has his isTurn flag set to true and Player2 has his isTurn flag set to false.

Player1 sends his move over to Player2.

Player1’s isTurn flag is set to false.

Player2 receives the move and sets his isTurn flag to true.

We need a mechanism to establish communication between two different Vuex instances

Using Solace PubSub+ Event Broker to distribute your Vuex state

Solace PubSub+ Event Broker is a multi-protocol, fully featured and free-to-use event broker. One of the many transports that it supports is WebSocket for both Node.js and a browser, which makes it ideal for solving this particular problem.

The APIs and protocols that Solace PubSub+ Event Broker natively supports

Getting started with the PubSub+ Event Broker

To get started with PubSub+ Event Broker, you create a new Solace cloud messaging service (for FREE!). If you need help with creating a messaging service, refer to this guide.

Publish events from your Vuex store

Now in your makeMove(…) action, we can change the code as follows:

makeMove({ commit, getters }, move) { if (getters.isTurn()) { console.log( `Sending ${JSON.stringify(move)} to ${getters.getPlayer()}/Move` ) mqttClient.publish(`${getters.getPlayer()}/Move`, move).then(() => { commit('SWAP_TURN') }) } }

Note you are now sending a message on a well-defined topic ‘Player1/Move’ or ‘Player2/Move’ with the move payload.

Subscribing to move events from the other player

Now how do you get notified when another player, connected from another browser, makes a move?

In your view (in the beforeMount() lifecycle hook, for example) you will simply make use of a subscription function which may look something like this:

//Subscribe to the other player's move message this.$mqttClient .subscribe( 'Player2/Move', ({ topic, message }) => { store.dispatch('receiveMove', message) //rest of your business logic } ) .then(() => { console.log('Succesfully subscribed') }) })

You are adding a subscription to the topic ‘Player2/Move’ if you are ‘Player1’ or ‘Player1/Move’ if you are ‘Player2’. Your callback will instantaneously be triggered once you get a message with the event on the topic.

Your finished product will look something like this across two browser windows:

GitHub Repo

To take a look at a fully built out sample implementation, navigate to this linking-vuex-stores repo .

Conclusion

In this post, I showed you how easy it is to link different Vuex stores together using simple publish/subscribe semantics via Solace PubSub+ Event Broker.

While this works, you may realize that state is being distributed and controlled on the client side. Ideally you would want state to be validated and distributed from the server side. In a future post, we will show you how easy it is to add a node.js server using XState (a popular JavaScript state machine library) to this architecture to control and validate state on the server side while continuing to use Vuex on the client side.

The post Linking Vuex State Machines Across Your Vue Client Applications with Solace PubSub+ appeared first on Solace.

Linking Vuex State Machines Across Your Vue Client Applications with Solace PubSub+ published first on https://jiohow.tumblr.com/

0 notes

php-sp · 5 years ago

Text

Mint Task Manager - Task Progress Tracking, User Rating & Analysis

New Post has been published on https://intramate.com/php-scripts/mint-task-manager-task-progress-tracking-user-rating-analysis/

Mint Task Manager - Task Progress Tracking, User Rating & Analysis

LIVE PREVIEWGet it now for only $49

Introduction

Mint Task Manager is designed for small & medium sized teams to create, assign, track and analyze various tasks and also to assess your team member performance based on the assigned task rating. This all in one solution provides some unique features like user roles & permissions, multi level user designation, multiple locations and tones of configurations that can be customized for various company level requirements.

To get the SaaS Version of Mint Task Manager, Click Here.

Here are some reviews of the script.

The script is designed with Most Popular PHP framework Laravel 6.0 simplest Javascript framework Vue.js as Single Page Application. The script comes with one click installer that can be deployed in local or live server. It includes unencrypted, unminified vesion of all development files that you can customize as per your use within the license terms.

The script supports REST Api & uses JSON based authentication token. The script is well documented and help documents are available at http://support.scriptmint.com

This script will be updated regularily with latest version of framework & plugins. Please share your feedback, feature request which will be surely implemented in upcoming versions.

The code is well commented and written with love by www.scriptmint.com. Here is the example:

What are the pre-requisites to install this script?

Here are list of pre-requisites which is required to install this script:

PHP >= 7.2

OpenSSL PHP Extension

PDO PHP Extension

Mbstring PHP Extension

Tokenizer PHP Extension

XML PHP Extension

MySQL Native Driver Support

GD Image Library

Zip Archive Extension

Curl (7.43 Min) Support + allow_url_fopen enabled

The script supports REST api with example documentation, Here is screenshot of API documentation:

What does it include?

Here are list which is included in this script:

Built with Laravel 6.0

Vue.js 2.6.10

Responsive Bootstrap 4

REST Api

Speed-up development with Laravel Mix-Webpack

Browser Sync

Support Sass

JSON based authentication, Uses tymon/jwt-auth

Single Page Application (SPA), Uses Vue Router

Vuex for data flow

Pagination

Datepicker

What modules are available with Laravue Starter Kit?

Here are list of pre defined components which is available in this script:

Autosize Textarea

Date Range Picker

File Upload Input

File Upload Progress

HTML Editor

Upload Image

Here are list of modules which is available in this script:

User Authentication

Social oAuth

Reset Password

User Registration

User Activation

Account Approval

Two Factor Authentication

Screen Lock

Reset Password Token Lifetime

Password Strength Meter

User List

User Profile

Change Password

User Avatar

Sample Todo Module

Private Message

Database Backup

IP Filter

Maintenance Mode

Multilingual

RTL Support

Date/Time Format & Timezone

Activity Log

Email Log

Custom Email Templates

User Roles & Permissions

Multiple Mail Drivers

Nexmo SMS Api

Task Management

Sub Task

Comment, Note, Task Attachment

Task Sign Off Request

Task Rating

Reports

FAQ’s

What license information is required during installation?

The script requires “Access Code” to be entered during installation. You need to login with your envato account to https://auth.scriptmint.com to get the access code and add domains where you willing to install the application. More information about “Access Code” can be accessed here http://support.scriptmint.com/support/solutions/articles/42000022689-where-can-i-get-access-code-required-during-installation-

Does this script include all source code with unminified version?

Yes, this includes everything, including composer.json, package.json, webpack.mix.js, different plugins and all in it.

Where can I access documentation?

All the documentation is available at http://support.scriptmint.com which you can access online. In case you face any issue, please raise a ticket at http://support.scriptmint.com. Estimated response time is 48 working hours.

Does author provides installation support?

No, author doesn’t provide installation support in any environment (live or local). You can read the support documentation which is available online.

Will I get support for further development if I have any queries?

Yes, you will get answer of all your queries and issues (if any). Please note that author is not going to teach you coding skill but author will only be available to answer your questions as mentioned in support tab. It is recommened to have basic knowledge of any PHP framework along with Javascript. Also note, that support is only available to the customers, who have purchased the script from www.codecanyon.net. You need to provide your Envato Username & Purchase code in order to get author support.

Does author provides customization?

Yes, author is available for customization but with extra charge of $15 per hour.

Can I use this script for multiple instance?

No, if you have purchased regular license then you can only use this script only for 1 instance. If anytime, it is found that you have used multiple instance of this script, your support will be blocked immediately.

Documentation related to this script is available at http://support.scriptmint.com/support/solutions/folders/42000076991

If you have any query, please raise a ticket at http://support.scriptmint.com

LIVE PREVIEWGet it now for only $49

#PHP Scripts

0 notes

sixtus01 · 6 years ago

Text

2019 build a Todo app with vue js

This course we will build a Todo app with vue.js

It’s simple and also strong.

But before you learn it , you need some basic kownledge about vue

Like v-model, v-bind, v-on:clik and so on.

And also you should have some javascript basic kownledge, so you can learn this course very easy.

I am recommend you follow the teacher while learning.

Who this course is for:

Anyone who love frontend

Ude…

View On WordPress

#攀童

0 notes

siliconwebx · 6 years ago

Text

Making Web Components for Different Contexts

This article isn’t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let’s talk about how to work with them, what to consider when making them, and how to embrace them in your projects.

If you are new to web components, Caleb’s guide is a great read, but here are more resources that will get you up to speed:

Web Components — the "right" way

Shadow DOM v1: Self-Contained Web Components

Web Components on MDN

Awesome Web Components

Open Web Component Recommendations

Since web components are now widely supported (thanks to the hard work of many people behind the scenes) — and considering the imminent switch that Edge will make to the chromium platform — people are now thinking about web components as "native" and a platform-compliant way to build reusable UI components to keep consistency across design systems and web projects, while using the power of the Shadow DOM to encapsulate style and logics inside the component itself.

Well, this can be true and false at the same time. But first, let’s get acquainted with the Abstraction Layers Triangle.

The Abstraction Layers Triangle

Technically, we should consider web components as an extension of our favorite markup language, HTML (yep!). The Web Components API allows us to create custom HTML elements (e.g. <foo-bar>) that don’t exist in HTML.

We are told web components are basically new HTML elements, so we should consider them as part of the HTML specifications and, consequently, we should follow its paradigms, core concepts, and utilization. If we assume all of these points, we will figure out that our components will live among the lowest levels of the web platform stack, alongside HTML, CSS, and JavaScript.

Frameworks and libraries like React, Vue, Angular, SvelteJS work on their abstraction level, right above other tools that live in a sort of "middle earth," like StencilJs, Hybrids and Lit. Under these layers of abstraction, we can find our basic web technologies… and vanilla web components. We can represent this concept with an ALT (A>bstraction L Triangle) diagram:

The higher we go, the more abstraction things get.

Why is this important? Well, it helps us visualize the various layers that exist on top of native components and understand the context they are used so that they can be built for an intended context. What's context? That's where we're headed.

Same technology, different contexts

The Shadow DOM is a key factor in the Web Components API. It allows us to bundle JavaScript and CSS inside a custom element to both prevent external interferences and style manipulations, unless we expressly allow it. There are indeed some approaches that developers can follow to allow external CSS to leak into the shadow root and into a component, including custom properties and the ::part and ::theme pseudo-elements, which is something Monica Dinculescu) has covered so well.

There is also another thing to consider: the context we are working with. After three years of building web components personally, I can identify two contexts: the private context (like a design system) and the standard context (like plain HTML, CSS, and JavaScript without custom styles).

Before designing components, we need to know how they will be used, so determining the type of context is a key to all of this. The most easy way is targeting only one context, but with a small CSS trick. we can build our components for both of them.

Let’s look at the differences between the two contexts before we get into that.

Private context

A private context is a closed ecosystem that provides components with their own style that must be used as-is. So, if we are building a component library that comes from specific styling guidelines or a design system, each component will reflect custom styles so there’s no need to code them up each time they’re needed.

That can be true also with JavaScript logic. For example, we can attach a closed shadow root that prevent others to accidentally pierce the shadow boundary with a querySelector. As a a result, we can simply pick and use all any component, avoiding issues like style inconsistencies and CSS collisions. As the author, you can also get to define a set of CSS custom properties (or ::parts) that can be used to style a component for a specific use case, but this is not the focus point of a design system.

Here’s an example of a web component component in a private context. It has all of the styles and logic contained inside its shadow-root and and can simply be dropped into any page.

See the Pen Closed Context Web Component by Mattia Astorino (@equinusocio) on CodePen.

This example and the one to follow are for demonstration purposes and not intended for production use because they do not make considerations for key situations, like accessibility and other optimizations.

Components in a private context can be rarely used outside of that context. For example, if we try to take an element from a design system (which has its own enforced styles), we’re unable to simply add it to a project and expect to customize it. You know how Bootstrap can be themed and customized to your liking? This is pretty much the opposite of that. These components are made to live inside their context and their context only.

Standard context

A standard context may be the most complex type of component, not only because the environment can range anywhere from a full-fledged framework (like Vue and React) to plain vanilla HTML, but also because everyone should be able to use that component like any other element.

For example, when adding a component publicly, say to npm, those who use it will expect to be able to customize it, at least to some degree.

Do you know of any HTML element that comes with its own presentational style? The answer should be no because, well, elements must be explicitly styled with CSS. This is also true for web components made in a standard context. A single web component should be customizable by adding classes an attributes, or other methods.

Here’s the same <todo-list> element that we saw in the closed context example, but designed for a standard context. It works as-is, without any presentational styles inside its shadow root. In fact, it only contains the required logic and baseline CSS to make sure it functions. Otherwise, it’s completely customizable like any standard HTML element, like a div.

See the Pen Standard Context Web Component by Mattia Astorino (@equinusocio) on CodePen.

Both of the examples we’ve looked at for each context are made with the same component. The difference is that the component in a standard context an be customized and selected with external CSS.

Web components and composition

OK, so working with web components is really the same as working with plain HTML, though as we’ve seen, it’s important to follow the paradigms and principles of the given content. Well, thing we need to be mindful of is the web component composition.

As explained by Google Web Fundamentals:

Composition is one of the least understood features of shadow DOM, but it's arguably the most important.

In our world of web development, composition is how we construct apps, declaratively out of HTML. Different building blocks (<div>s, <header>s, <form>s, <input>s) come together to form apps. Some of these tags even work with each other. Composition is why native elements like <select>, <details>, <form>, and <video> are so flexible. Each of those tags accepts certain HTML as children and does something special with them. For example, <select> knows how to render option> and <optgroup> into dropdown and multi-select widgets. The <details> element renders <summary> as an expandable arrow. Even <video> knows how to deal with certain children: <source> elements don't get rendered, but they do affect the video's behavior. What magic!

Composition is what we normally do when we work with HTML. Since web components are merely HTML elements with a DOM reference — and not logical containers — we should rely on composition to build our components and any sub-components. If you think about the ul and and select you will notice that you declaratively compose these elements to get the final output and you have specific attributes to be used with the main component (e.g. [readonly]) or the sub-component (e.g. [selected]). This is true also for web components, and if you are building a custom list, consider to build the main component (<custom-list>) and the child one (<custom-li>). Using the [slot] element, you can define where children elements will be placed and also placeholder content that will be shown when no children are passed through.

Web components and accessibility

Another thing to consider is that "small" topic we call accessibility. Since we are creating completely new HTML elements, we need to consider the accessibility of our elements in order to provide a basic semantic role, any keyboard navigation as well as the user’s operating system preferences, like the reduce motion and high contrast settings.

I strongly suggest the following resources as reference for building accessible and inclusive components, how to define semantic markup, and how to implement a basic keyboard navigation.

Inclusive Components

Accessible to All on web.dev

WAI-ARIA Authoring Practices

WebAIM WCAG Checklist

Conclusion

Web components are an emerging technology in web development and, as such, there really aren’t any clearly defined best practices to guide us as far as building them for their intended or maximized use. When you find yourself working with them, perhaps the single thing you can take away from this post is to consider whether they are intended for a closed context or a standard context, then ask yourself WHI:

Who will use this component?

How much flexibility should that person have to customize it?

Is this component for everyone or for a specific audience?

The post Making Web Components for Different Contexts appeared first on CSS-Tricks.

😉SiliconWebX | 🌐CSS-Tricks

#Silicon Web Design #Ahmedabad #India #Web Development #WPBeginner #Silicon URL #Web Site #Cloud Host

0 notes

suzanneshannon · 6 years ago

Text

Making Web Components for Different Contexts

If you are new to web components, Caleb’s guide is a great read, but here are more resources that will get you up to speed:

Web Components — the "right" way

Shadow DOM v1: Self-Contained Web Components

Web Components on MDN

Awesome Web Components

Open Web Component Recommendations

Well, this can be true and false at the same time. But first, let’s get acquainted with the Abstraction Layers Triangle.

The Abstraction Layers Triangle

The higher we go, the more abstraction things get.

Same technology, different contexts

Let’s look at the differences between the two contexts before we get into that.

Private context

Here’s an example of a web component component in a private context. It has all of the styles and logic contained inside its shadow-root and and can simply be dropped into any page.

See the Pen Closed Context Web Component by Mattia Astorino (@equinusocio) on CodePen.

Standard context

For example, when adding a component publicly, say to npm, those who use it will expect to be able to customize it, at least to some degree.

See the Pen Standard Context Web Component by Mattia Astorino (@equinusocio) on CodePen.

Both of the examples we’ve looked at for each context are made with the same component. The difference is that the component in a standard context an be customized and selected with external CSS.

Web components and composition

As explained by Google Web Fundamentals:

Composition is one of the least understood features of shadow DOM, but it's arguably the most important.

Web components and accessibility

I strongly suggest the following resources as reference for building accessible and inclusive components, how to define semantic markup, and how to implement a basic keyboard navigation.

Inclusive Components

Accessible to All on web.dev

WAI-ARIA Authoring Practices

WebAIM WCAG Checklist

Conclusion

Who will use this component?

How much flexibility should that person have to customize it?

Is this component for everyone or for a specific audience?

The post Making Web Components for Different Contexts appeared first on CSS-Tricks.

Making Web Components for Different Contexts published first on https://deskbysnafu.tumblr.com/

0 notes

simplemlmsponsoring · 7 years ago

Photo

New Post has been published on http://simplemlmsponsoring.com/attraction-marketing-formula/mlm-sponsoring/how-to-watch-the-epic-copa-libertadores-final-online-for-free/

How to watch the epic Copa Libertadores final online for free

The 2018 Copa Libertadores final became too dangerous and high-profile for its home teams. The South American competition’s championship this year happened to feature crosstown rivals who harbor Montague and Capulet disdain for each other, and after players were tear-gassed and attacked by fans in Buenos Aires, we’re settling this one overseas in Madrid. Here’s everything you need to know to live stream the 2018 Copa Libertadores final between Argentinian blood rivals, Boca Juniors and River Plate.

2018 Copa Libertadores: River Plate vs. Boca Juniors

When: Sunday, Dec. 9, at 2:30pm ET

Where: Santiago Bernabeu, Madrid

Streaming: Telemundo (U.S.), Fox Deportes (U.S.), FuboTV

2018 Copa Libertadores: How to watch online for free

The good news: This viral, crossover South American event has never been more accessible to U.S. soccer fans. The game is on Telemundo, which is an over-the-air channel you can freely access at home with an HD TV antenna. Seriously, this one is $15 at CVS and I use it at home—even bought one for the office. For cord-cutters, having immediate access to the basic channels (Fox, ABC, NBC, CBS, PBS, Univision, Telemundo) is the secret sauce to making it work. But if you don’t have a TV or are on the go and need a live stream, we’ve got you covered.

1) FuboTV

FuboTV

Cost: $39.99 for your first month and $44.99 per month thereafter (after a 7-day free trial) Devices: Roku, Apple TV, Amazon Fire, Android TV, iOS, and Android devices

FuboTV is one of the leading live TV streaming services, offering a compelling combination of sports (NBA TV, NFL Network), entertainment (AMC, Syfy, FX), and news (MSNBC, CNN) channels in its core package. But where it really shines is with international soccer, offering UniMas, 10 beIN Sports channels, NBCSN, FS1 and FS2, and more, so you can watch everything from English Premier League to La Liga all in one place. You’ll also get three-day replay for games and 30 hours of cloud DVR. (Here’s the complete FuboTV channels list.)

2) Hulu with Live TV

Hulu

Cost: $40-$44 per month (after a 7-day free trial) Hulu devices: Roku, Apple TV, Google Chromecast, Amazon Fire Stick and Fire TV, Xbox One, Xbox 360, Nintendo Switch, and iOS and Android devices

Hulu has always been the best option for catching up on your favorite TV shows online. Now it’s also one of the best ways to watch live programming and sports. Hulu with Live TV offers 60 channels, including a full suite of ESPN channels, FS1 and FS2, NBCSN and CBS Sports Network, not to mention all of the major local TV channels. The best part: Every Hulu with Live TV subscription unlocks Hulu’s full catalog of on-demand entertainment, so you can watch movies, documentaries, anime, and Hulu original series when the game’s over. (Here’s the complete list of Hulu Live TV channels.)

3) YouTube TV

YouTube TV

Cost: $40 per month (after a 7-day free trial)

Devices: Google Chromecast, Roku, Apple TV, Android TV, Xbox One, iOS and Android devices

Just how dedicated is YouTube TV to streaming soccer? The service offers three channels devoted to MLS teams, a feature no other streaming service can match. YouTube TV also offers ESPN and ESPN2, Big Ten Network, and specialty channels like NBA TV and MLB Network. If you’re looking to split a service with roommates, YouTube TV is ideal: You can add up to six accounts per household, and each one of those accounts gets unlimited cloud DVR. (You can find the full list of YouTube TV channels here.)

4) DirecTV Now

DirectTV Now

Cost: $40-$75 per month (after a 7-day free trial)

Devices: Roku, Apple TV, Google Chromecast, and Amazon Fire Stick

DirecTV Now, the online alternative to DirecTV, offers five different channel packages. While the entry-level Live a Little package ($40 per month) covers most of your bases, for international soccer, you’ll want to get the Todo y Mas (“Everything and More”) for $45 per month. This package is geared toward Spanish-speaking viewers, with channels like Univision, ESPN Deportes, Telemundo, and CNN En Español. It’s the only DirecTV Now option that includes beIN Sports, which you’ll need for La Liga matches. (You can view the full DirecTV Now channels list here.)

5) PlayStation Vue

PlayStation Vue

Cost: $44.99-$79.99 per month (after a 7-day free trial)

Devices: PlayStation 3 and 4, Roku, Amazon Fire, Google Chromecast, Kodi, iOS and Android devices

If you want to stream live TV via your PlayStation, this is your best option, but you don’t need a gaming console to use PlayStation Vue. The streaming service is also available via Roku, Amazon Fire, Chromecast, iOS and Android devices and even Kodi. Which is great, because you can stream on up to five devices at once, so you can watch on your phone without worrying about causing problems for someone at home. PlayStation Vue offers four different levels of channel packages, but you’ll find most of what you need in the entry-level Access package, which costs $44.99 per month. (Here are all of PlayStation Vue channels.)

Copa Libertadores: Why it matters

South America’s Copa Libertadores is basically the Champions League: The top South American clubs from different countries play a tournament. It’s the oldest such competition in the world—the South American Super Bowl. But with the stakes so high, the home-and-home series between Boca Juniors and River Plate took a turn.

After a nuts 2-2 draw in Boca’s iconic La Bonbonera stadium (the box of chocolates), the final game was scrapped after angry River Plate fans broke the windows of Boca’s bus and sent several players to the hospital. Riot police tear-gassed the area and fumes likewise went into Boca’s bus. This led to two weeks of politics, and finally, a tentative agreement to play out this thing Sunday in Madrid. (We’ll see if Boca, which campaigned to be declared the champion as a sort of fair play settlement, shows up.) The world is rooting for Boca: It’s the working-class Buenos Aires team of the people with the cooler stadium and the team that got tear-gassed. River Plate, a club housed in the more affluent Belgrano neighborhood, doesn’t shy away from its Los Millonarios nickname, which began in the 1930s when the club became infamous for buying all the good players, Yankees-style.

These days the best Argentian talent is immediately purchased by European power players, so these clubs are built on veteran legends returning home to close out their careers with boyhood clubs (Carlos Tevez) paired with heavily scouted young talent. Get ready for fireworks.

New to cord-cutting? Here are our picks for the best movie streaming sites of 2018 and free live TV apps and channels. If you’re looking for a specific channel, here’s how to watch HBO, Showtime, Starz, ESPN, ESPN2, ESPN3, AMC, FX, Fox News, MSNBC, CNN, CNBC, FS1, TBS, TNT, Golf Channel, Syfy, HGTV, Cartoon Network/Adult Swim, Bravo, Lifetime, Discovery, PBS, the CW, BBC, CSPAN, NBA TV, MTV, Comedy Central, Food Network, TLC, the Weather Channel, and NFL RedZone without cable, as well as free movies on YouTube. If you’re on the move, here’s how to watch Fox Sports Go and live stream NBC Sports.

The Daily Dot may receive a payment in connection with purchases of products or services featured in this article. Click here to learn more.

The post How to watch the epic Copa Libertadores final online for free appeared first on The Daily Dot.